<template>
  <view>
    <view v-for="(item, index) in arr" :key="index" class="tn-padding-sm">
      <uni-card class="card" :isFull="true">
        <view class="uni-body" style="position: relative;">
          <view>
            <text class="label">
              路产名称：
              <text class="value">{{ item.typeName }}</text>
            </text>
          </view>
          <view>
            <text class="label">
              数量：
              <text class="value">{{ item.number }}</text>
            </text>
          </view>
          <view>
            <text class="label">
              单价：
              <text class="value">{{ item.price }}</text>
            </text>
          </view>
          <view>
            <text class="label">
              单位：
              <text class="value">{{ item.unit }}</text>
            </text>
          </view>
          <tn-button style="position: absolute;right: 0;bottom: 0;" @click="deleteItem(index)"
                     backgroundColor="tn-bg-red"
                     fontColor="tn-color-white">删除
          </tn-button>
        </view>
      </uni-card>
    </view>
    <tn-popup v-model="show" mode="bottom" length="50%">
      <view class="card tn-padding-sm tn-margin-sm">
        <inputForm v-model="form" ref="form" :list="list" @typeIdChange="typeIdChange"/>
        <view class="tn-flex tn-flex-row-center tn-padding-xl">
          <tn-button @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
          </tn-button>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
import inputForm from '@/components/inputForm.vue'
import {calc} from "a-calc/es";
import {listStuff,} from "../../../api/lupeiwenshu";

export default {
  components: {
    inputForm
  },
  data() {
    return {
      total: 0,
      show: false,
      form: {},
      arr: [],
      list: [{
        label: '路产名称：',
        prop: 'typeId',
        type: 'select',
        props: {
          label: 'name',
          value: 'id'
        },
        dicData: [],
      }, {
        label: '数量：',
        prop: 'number',
      }, {
        label: '单价：',
        prop: 'price',
      }, {
        label: '单位：',
        prop: 'unit',
      }]
    }
  },
  watch: {
    "arr.length"(val) {
      val && this.jisuanjia()
    },
  },
  mounted() {
    this.initSelectJson()
  },
  methods: {
    async initSelectJson() {
      this.list.find(item => item.label === '路产名称：').dicData = (await listStuff()).data;
    },
    // 路产名称变动
    typeIdChange(val) {
      const luchang = this.list.find(item => item.label === '路产名称：')
      const current = luchang.dicData.find(item => item[luchang.props.value] === val[0].value)
      if (current) {
        this.form.number = 1
        this.form.price = current.price
        this.form.unit = current.unit
        this.form.typeName = current.label || current.name
      }
    },
    deleteItem(index) {
      this.arr.splice(index, 1)
      this.jisuanjia()
    },
    showPoppup() {
      this.show = true
    },
    submit() {
      this.$refs.form.$refs.form.validate((valid) => {
        if (valid) {
          console.log('验证通过')
          this.arr = [this.form, ...this.arr]
          this.show = false
          this.form = {}
        }
      })
    },
    jisuanjia() {
      this.total = this.arr.reduce((total, item) => {
        const itemTotal = calc(`${item.price}* ${item.number} | 2`)
        return calc(`${total} + ${itemTotal} | 2`)
      }, 0)
      this.$emit('total', this.total)
      this.$emit('listChange', this.arr)
    },
  }
}
</script>
<style scoped lang="scss">

</style>
